<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../css/main.css" />
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
	</head>
	<body>
		<div id="app">
			<section>
				<van-icon name="arrow-left" color="wheat" size="36px" style="float: left;position: absolute;z-index: 2;top: 5px;"
				 @click="back">
				</van-icon>
				<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
					<van-swipe :autoplay="2000">
						<van-swipe-item v-for="(u,i) in Goodsdetail.SwipeImages">
							<img v-bind:src="GoodsImg[i]" onerror="javascript:this.src='../img/insert.png';onerror=null; " style="width: 100%;height:100%" /></van-swipe-item>
					</van-swipe>
					<van-cell-group>
						<div style="padding:0px 15px;">{{Goodsdetail.Name}}</div>
						<div style="padding-left: 13px;color: red;">￥{{Goodsdetail.RealPrice}}</div>
						<van-cell title="" label="快递:免运费&emsp;  &emsp;  &emsp;  &emsp;  &emsp; 销量">
							<p style="font-size: 12px;">{{Goodsdetail.SaleCount}}</p>
						</van-cell>
					</van-cell-group>
					<van-row style="background-color: #EBEDF0; color: red;height:50px;line-height:50px;text-align: center;font-size: 16px;">
						<van-col span="8">
							<b>正品保证</b>
						</van-col>
						<van-col span="8">
							<b>极速退款</b>
						</van-col>
						<van-col span="8">
							<b>两天内发货</b>
						</van-col>
					</van-row>
					<van-row style="text-align: center;font-size: 17px;background-color: white;margin-top: 10px;">
						<van-col span="6">商品详情</van-col>
						<van-col span="18"></van-col><!-- 空白填补 -->
						<van-col v-for="item in img" span="24">
							<img :src="item" >
						</van-col>
					</van-row>
				</van-pull-refresh>
			</section>
			<van-goods-action>
				<van-goods-action-mini-btn @click="like">
					<van-icon name="like"  color="red"  size="24px" v-if="IsCollected"></van-icon>
					<van-icon name="like-o" size="24px" v-else></van-icon>
					<div v-text="IsCollected ? collected.already : collected.noready" ></div>
				</van-goods-action-mini-btn>
				<van-goods-action-big-btn @click="addtocart">
					加入购物车
				</van-goods-action-big-btn>
				<van-goods-action-big-btn primary @click="buy">
					立即购买
				</van-goods-action-big-btn>
			</van-goods-action>
			<van-sku
				v-model="showBase"
				:sku="sku"
				:goods="goods"
				:initial-sku="num"
				:close-on-click-overlay=true
				@stepper-change="change"
				:show-add-cart-btn=false
				@buy-clicked="onAddCartClicked"
			/>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					num:1,
					showBase:false,
					Goodsdetail: "",
					sku:{
						tree:[],list:[],price:0.01,message:[],stock_num:333
					},
					GoodsImg:["../img/Goods1.jpg","../img/Goods2.jpg"],
					goods:{
						title:"",
						picture:"../img/insert.png",
					},
					IsCollected: false,
					collected:{
						already:"已收藏",
						noready:"收藏",
					},
					key:"",
					id:"",
					img:["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg"],
					isLoading:false,
				},
				mounted() {
					plus.key.addEventListener("backbutton",function(){  
						var wv = plus.webview.currentWebview();
						plus.webview.close(wv.id);
					});  
					var _this=this;
					var w = plus.webview.currentWebview();
					_this.id=w.Id;
					if(localStorage.getItem("keys")!=null){//判断是否已收藏
						_this.key=localStorage.getItem("keys");
						ajax({
							//获取已收藏商品
							dataType:"JSONP",
							url:"http://dsapi.ysd3g.com/api/MyGoodsCollectList",
							data:{
								p:1,key:_this.key
							},
							success:function(res){
								for(var i= 0 ; i < res.Data.length;i ++){
									if(res.Data[i].GoodsId == _this.id){
										_this.IsCollected = true;
									}
								}
							}
						});
					}
					ajax({
						data: {
							gId: _this.id
						},
						url: "http://dsapi.ysd3g.com/API/GoodsDetail",
						dataType: "json",
						success: function(res) {
							// console.log(res);
							vm.Goodsdetail = res.Detail;
							vm.goods.title=vm.Goodsdetail.Name
						}
					});
				},
				methods: {
					addtocart: function() {
						var _this=this;
						var w=plus.webview.currentWebview();
						if(_this.key==null){
							this.$dialog.confirm({
							  title: '提示',
							  message: '还未登陆，是否去登陆',
							  confirmButtonText:"去登陆"
							}).then(() => {
							  // on confirm
							  plus.webview.create("../Person-views/login.html","login");
							  plus.webview.show("login");
							}).catch(() => {
							  // on cancel
							});
						}else{
							var w = plus.webview.currentWebview();
							ajax({
								type: "post",
								dataType: "JSONP",
								url: "http://dsapi.ysd3g.com/api/MyGoodsCollectList",
								data: {
									key: _this.key
								},
								success: function(res) {
									console.log(res);
									if (res.Error) {
										// console.log(res);
										_this.$dialog.confirm({
										  title: '提示',
										  message: '登陆过期，请重新登陆',
										  confirmButtonText:"登陆"
										}).then(() => {
										  // on confirm
										  plus.webview.create("../views/Person-views/login.html","login");
										  plus.webview.show("login");
										}).catch(() => {
										  // on cancel
										});
									}else {
										//存入本地存储
										localStorage.setItem(_this.id,JSON.stringify(_this.Goodsdetail)); 
										_this.$toast.success("加入购物车成功");
										plus.webview.getWebviewById("Shopping").reload(true);
									}
								}
							})
							
						}
					},
					like: function() {
						var _this=this;
						if(localStorage.getItem("keys")==null){
							this.$dialog.confirm({
							  title: '提示',
							  message: '还未登陆，是否去登陆',
							  confirmButtonText:"登陆"
							}).then(() => {
							  // on confirm
							  plus.webview.create("../views/Person-views/login.html","login");
							  plus.webview.show("login");
							}).catch(() => {
							  // on cancel
							});
						}else{
							if(_this.IsCollected){
								ajax({
									type: "post",
									dataType: "JSONP",
									url: "http://dsapi.ysd3g.com/api/cancelCollectGoods",
									data: {
										goodsId: _this.id,
										key: _this.key
									},
									success: function(res) {
										console.log(res);
										if (res.Error) {
											// console.log(res);
											_this.$dialog.confirm({
											  title: '提示',
											  message: '登陆过期，请重新登陆',
											  confirmButtonText:"登陆"
											}).then(() => {
											  // on confirm
											  plus.webview.create("../views/Person-views/login.html","login");
											  plus.webview.show("login");
											}).catch(() => {
											  // on cancel
											});
										}else {
											_this.$toast("取消收藏成功");
											_this.IsCollected=false;
											if(plus.webview.getWebviewById("MyCollected")){
												plus.webview.getWebviewById("MyCollected").reload(false);
											}
										}
									}
								})
							}else{
								ajax({
									type: "post",
									dataType: "JSONP",
									url: "http://dsapi.ysd3g.com/API/CollectGoods",
									data: {
										goodsId: _this.id,
										key: _this.key
									},
									success: function(res) {
										console.log(res);
										if (res.Error) {
											// console.log(res);
											_this.$toast("收藏错误");
										}else {
											_this.$toast("收藏成功");
											_this.IsCollected=true;
										}
									}
								})
							}
						}
					},
					buy(){
						var _this=this;
						if(localStorage.getItem("keys")==null){
							this.$dialog.confirm({
							  title: '提示',
							  message: '还未登陆，是否去登陆',
							  confirmButtonText:"登陆"
							}).then(() => {
							  // on confirm
							  plus.webview.create("../views/Person-views/login.html","login");
							  plus.webview.show("login");
							}).catch(() => {
							  // on cancel
							});
						}else{
							var w = plus.webview.currentWebview();
							ajax({
								type: "post",
								dataType: "JSONP",
								url: "http://dsapi.ysd3g.com/api/MyGoodsCollectList",
								data: {
									key: _this.key
								},
								success: function(res) {
									console.log(res);
									if (res.Error) {
										_this.$dialog.confirm({
										  title: '提示',
										  message: '登陆过期，请重新登陆',
										  confirmButtonText:"登陆"
										}).then(() => {
										  // on confirm
										  plus.webview.create("../views/Person-views/login.html","login");
										  plus.webview.show("login");
										}).catch(() => {
										  // on cancel
										});
									}else {
										_this.showBase=true;
									}
								}
							})
						}
					},
					onAddCartClicked(){
						var _this=this;
						var price=_this.num*_this.Goodsdetail.RealPrice;
						var wv=plus.webview.create("./Shopping_view/pay.html","pay",{},{pid:_this.id,num:_this.num,price:price});
						plus.webview.show("pay");
					},
					change(i){
						var _this=this;
						_this.num=i;
					},
					back: function() {
						var wv = plus.webview.currentWebview();
						plus.webview.close(wv.id);
					},
					onRefresh(){
						ajax({
							type:"post",
							url:"http://dsapi.ysd3g.com/api/IndexGoodsData",
							dataType:"JSON",
							success:function(res){
								// console.log(res.Data);
								vm.Goods=res.Data;
							}
						});
						 setTimeout(() => {
							this.$toast('刷新成功');
							this.isLoading = false;
						  }, 500);
					},
				}
			})
		</script>
	</body>
</html>
